<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div v-if="crud.props.searchToggle">
        <!-- 搜索 -->
        <el-input
          v-model="query.blurry"
          size="small"
          clearable
          placeholder="输入名称或者描述搜索"
          style="width: 200px;"
          class="filter-item"
          @keyup.enter.native="crud.toQuery"
        />
        <el-date-picker
          v-model="query.createTime"
          :default-time="['00:00:00', '23:59:59']"
          type="daterange"
          range-separator=":"
          size="small"
          class="date-item"
          value-format="yyyy-MM-dd HH:mm:ss"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
        <rrOperation />
      </div>
      <crudOperation :permission="permission" />
    </div>
    <el-row :gutter="15">
      <!--角色管理-->
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <el-card class="box-card" shadow="never">
          <div slot="header" class="clearfix">
            <span class="role-span">招标项目列表</span>
          </div>
          <el-table
            ref="table"
            v-loading="crud.loading"
            highlight-current-row
            style="width: 100%;"
            :data="crud.data"
            @selection-change="crud.selectionChangeHandler"
            @current-change="handleCurrentChange"
          >
            <el-table-column :selectable="checkboxT" type="selection" width="55" />
            <el-table-column type="index" label="序号" />
            <el-table-column prop="name" label="名称" />
            <el-table-column :show-overflow-tooltip="true" prop="description" label="描述" />
            <el-table-column
              :show-overflow-tooltip="true"
              width="150px"
              prop="createTime"
              label="创建日期"
            >
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.createTime) }}</span>
              </template>
            </el-table-column>
            <el-table-column
              :show-overflow-tooltip="true"
              width="150px"
              prop="createTime"
              label="过审日期"
            >
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.createTime) }}</span>
              </template>
            </el-table-column>
            <el-table-column
              v-permission="['admin', 'roles:edit', 'roles:del']"
              label="操作"
              width="250px"
              align="center"
              fixed="right"
            >
              <template>
                <el-button>查看</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!--分页组件-->
          <pagination />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import crudRoles from '@/api/system/role';
  import { getDepts, getDeptSuperior } from '@/api/system/dept';
  import { getMenusTree, getMenuSuperior } from '@/api/system/menu';
  import CRUD, { presenter, header, form, crud } from '@crud/crud';
  import rrOperation from '@crud/RR.operation';
  import crudOperation from '@crud/CRUD.operation';
  import udOperation from '@crud/UD.operation';
  import pagination from '@crud/Pagination';

  const defaultForm = {
    id: null,
    name: null,
    depts: [],
    description: null,
    dataScope: '全部',
    level: 3,
  };
  export default {
    name: 'BuyerBidList',
    components: { pagination, crudOperation, rrOperation },
    cruds() {
      return CRUD({
        title: '角色',
        url: 'api/roles',
        sort: 'level,asc',
        crudMethod: { ...crudRoles },
      });
    },
    mixins: [presenter(), header(), form(defaultForm), crud()],
    data() {
      return {
        defaultProps: { children: 'children', label: 'label', isLeaf: 'leaf' },
        dateScopes: ['全部', '本级', '自定义'],
        level: 3,
        currentId: 0,
        menuLoading: false,
        showButton: false,
        menus: [],
        menuIds: [],
        depts: [],
        permission: {
          add: ['admin', 'roles:add'],
          edit: ['admin', 'roles:edit'],
          del: ['admin', 'roles:del'],
        },
        rules: {
          name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
          permission: [{ required: true, message: '请输入权限', trigger: 'blur' }],
        },
      };
    },
    created() {
      crudRoles.getLevel().then((data) => {
        this.level = data.level;
      });
    },
    methods: {
      /**
       * override
       */
      beforeCrudToAdd() {
        this.$router.push({
          name: 'User',
        });
      },
      // 编辑前
      [CRUD.HOOK.beforeToEdit](crud, form) {},
      // 提交前做的操作
      [CRUD.HOOK.afterValidateCU](crud) {
        return true;
      },
      [CRUD.HOOK.afterAddError](crud) {
        this.afterErrorMethod(crud);
      },
      [CRUD.HOOK.afterEditError](crud) {
        this.afterErrorMethod(crud);
      },
      afterErrorMethod(crud) {
        const depts = [];
        crud.form.depts.forEach(function (dept, index) {
          depts.push(dept.id);
        });
        crud.form.depts = depts;
      },
      // 触发单选
      handleCurrentChange(val) {
        if (val) {
        }
      },
      // 改变数据
      update() {
        // 无刷新更新 表格数据
        crudRoles.get(this.currentId).then((res) => {
          for (let i = 0; i < this.crud.data.length; i++) {
            if (res.id === this.crud.data[i].id) {
              this.crud.data[i] = res;
              break;
            }
          }
        });
      },
      // 获取弹窗内部门数据
      loadDepts({ action, parentNode, callback }) {
        if (action === LOAD_CHILDREN_OPTIONS) {
          getDepts({ enabled: true, pid: parentNode.id }).then((res) => {
            parentNode.children = res.content.map(function (obj) {
              if (obj.hasChildren) {
                obj.children = null;
              }
              return obj;
            });
            setTimeout(() => {
              callback();
            }, 200);
          });
        }
      },
      // 如果数据权限为自定义则获取部门数据
      changeScope() {
        if (this.form.dataScope === '自定义') {
          this.getDepts();
        }
      },
      checkboxT(row, rowIndex) {
        return row.level >= this.level;
      },
    },
  };
</script>
